<template>
      <div>
      <template v-for="item in (data.video||'').split(',')">
        <!-- <img v-image-preview :src="item" style="width:100px;" class="img"> -->
          <video
            v-if="data.video"
            :src="$uploadURL(item)"
            class="avatar video-avatar"
            controls="controls" style="width:300px">
            您的浏览器不支持视频播放
          </video>
          <i class="el-icon-delete" @click="deleteVideo(item)" v-if="data.video"></i>
        </template>
      <el-upload class="avatar-uploader"
        :http-request="handleUploadForm"
        :on-progress="uploadVideoProcess"
        :on-success="handleVideoSuccess"
        :before-upload="beforeUploadVideo"
        @change="change($event)"
        action="null"
        :show-file-list="false">
        <!-- <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                v-bind:src="videoForm.showVideoPath"
                class="avatar video-avatar"
                controls="controls" style="width:300px">
            您的浏览器不支持视频播放
        </video> -->
        <!-- <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
            class="el-icon-plus avatar-uploader-icon"></i> -->
            <el-button size="small" icon="el-icon-upload" type="primary" style="">上传</el-button>
        <el-progress v-if="videoFlag == true"
            type="circle"
            :percentage="videoUploadPercent"
            style="margin-top:0px;">
        </el-progress>
      </el-upload>
    </div>
</template>

<script>
import { fileImageApi } from '@/api/oss'
export default {
  name: 'Index',
  props: {
    guId: {
      type: String,
    },
    type: {
      type: Number,
    },
    newVideo:{
      type: String,
    }
  },
  data() {
    return {
      data:{
        video:''
      },
      videos:[],
      videoFlag:false,
      videoUploadPercent:0
    }
  },
  watch: {
    newVideo(news, old) {
      // 初始图片
      if (news) {
        // let pathArray = news.split(",");
        // this.data = pathArray.map((video) => ({ video }));
        this.data.video = news
        console.log(" this.data>>>", this.data);
      }
    },
  },
  methods: {
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
          console.log("请上传正确的视频格式");
           this.$message.error('请上传正确的视频格式');
          return false;
      }
      if (!fileSize) {
          console.log("视频大小不能超过50MB");
          this.$message.error('视频大小不能超过50MB');
          return false;
      }
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    // 上传
    handleUploadForm(param) {
      const formData = new FormData()
      formData.append('File', param.file)
      console.log("File",param.file);
      formData.append('CateId', 0)
      formData.append('Type', this.type)
      fileImageApi(this.guId,formData).then((res) => {
        this.$message.success('上传成功')
        console.log('上传成功',res);
        this.handleVideoSuccess(res)
      }).catch((error) => {
        this.$message.success('上传失败-------------------',error)
      })
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      console.log('--------------上传成功回调',res)
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if(res){
        console.log('this.data.video',this.data.video)
        if(this.data.video){
          this.data.video= this.data.video+','+ res
        }else{
          this.data.video= res
        }
        console.log('this.data.video**********',this.data)
        this.$emit('change', this.data.video)
        // this.videoForm.showVideoPath = res.data.url;
      }else{
         this.$message.error('上传视频失败************');
      }
      
    },
    //删除视频
    deleteVideo(e){
      console.log(e)
      var video=this.data.video
      var li=video.split(',')
      //获取索引
      var index=li.indexOf(e);
      if(index>-1){
        //删除数组中的元素
        li.splice(index, 1)
      }
      //将数组转换成字符串
      this.data.video=li.join(',')
      console.log('此时的video',this.data.video)
      this.$emit('change', this.data.video)
    }
  }
}
</script>

<style lang="scss" scoped>
  .uploadVideo {

  }
</style>
